<template>

  <el-form :model="form" ref="formRef" :rules="rules" label-position="left" label-width="100px" size="medium"
    @submit.prevent>
    <el-row>
      <el-col :span="6" class="grid-cell">【题型】：
        <span v-if="form.questionType ==='1'">单选</span>
        <span v-else-if="form.questionType ==='2'">多选</span>
        <span v-else>简答</span>
      </el-col>
      <el-col :span="6" class="grid-cell">【编号】：{{form.id}}</el-col>
      <el-col :span="6" class="grid-cell">【难度】：
        <span v-if="form.difficulty ==='1'">简单</span>
        <span v-else-if="form.difficulty ==='2'">一般</span>
        <span v-else>困难</span>
      </el-col>
      <el-col :span="6" class="grid-cell">【标签】：{{form.tags}}</el-col>
      <el-col :span="6" class="grid-cell">【学科】：{{form.subjectName}}</el-col>
      <el-col :span="6" class="grid-cell">【目录】：{{form.directoryName}}</el-col>
      <el-col :span="6" class="grid-cell">【方向】：{{form.direction}}</el-col>
    </el-row>
    <hr>
    <el-row>
      <el-col :span="24">
        <div>【题干】：</div>
        <div style="color: blue;" v-html="form.question"></div>
        <div v-if="form.questionType ==='1'">
          <p>单选题 选项：（以下选中的选项为正确答案）</p>
          <el-radio-group v-model="radioData" disabled class="ml-4" text-color="#409eff">
            <el-radio :label="item.isRight" size="large" v-for="item in form.options" :key="item.id">
              {{item.code}}:{{item.title}}</el-radio>
          </el-radio-group>
        </div>
        <div v-else-if="form.questionType ==='2'">
          <p>多选题 选项：（以下选中的选项为正确答案）</p>
          <el-checkbox-group v-model="checkState" disabled text-color="#409eff">
            <el-checkbox :label="item.isRight" v-for="item in form.options" :key="item.id"> {{item.title}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div v-else>简答题 选项：（以下选中为正确答案）</div>
      </el-col>
    </el-row>
    <hr>
    <el-row>
      <el-col :span="24">
        <div>【参考答案】：
          <el-button type="danger" @click="showVideo = !showVideo">视频答案预览</el-button>
          <br>
          <video v-show="showVideo" :src="form.videoURL" controls width="320" height="240"></video>
        </div>
      </el-col>
    </el-row>
    <hr>
    <el-row>
      <el-col :span="24">【答案解析】：<span v-html="form.answer"></span></el-col>
    </el-row>
    <hr>
    <el-row>
      <el-col :span="24">【题目备注】：<span v-html="form.remarks"></span></el-col>
    </el-row>
  </el-form>
  <el-row type="flex" justify="center">
    <el-button @click="onClose">关闭</el-button>
  </el-row>
</template>

<script>
// import { add, update } from '@/api/company'
import { detail } from '@/api/hmmm/questions'
import { ElMessage } from 'element-plus'
import {
  defineComponent,
  toRefs,
  reactive,
  ref,
  onMounted,
  nextTick
}
  from 'vue'
export default defineComponent({
  components: {},
  props: {
  },
  setup (props, { emit }) {
    const state = reactive({
      form: {
        id: undefined,
        difficulty: undefined,
        questionType: undefined,
        tags: undefined,
        directoryName: undefined,
        subjectName: undefined,
        direction: undefined,
        question: undefined,
        options: undefined,
        videoURL: undefined,
        answer: undefined,
        remarks: undefined
      },
      rules: {
      },
      isFamousOptions: [{
        label: '通过',
        value: true
      }, {
        label: '拒绝',
        value: false
      }]
    })
    const formRef = ref()
    const radioData = ref(1)
    const checkState = ref([1])
    const showVideo = ref(false)
    onMounted(() => {
      getQuestData(state.form)
    })
    // 获取信息,数据回显
    async function getQuestData (val) {
      await nextTick()
      const res = await detail(val)
      state.form = res.data
    }
    const resetForm = () => {
      formRef.value.resetFields()
    }
    const onClose = () => {
      resetForm()
      emit('close')
    }
    return {
      ...toRefs(state),
      formRef,
      resetForm,
      onClose,
      getQuestData,
      radioData,
      showVideo,
      checkState
    }
  }
})

</script>
<style scoped>
.el-radio-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}
</style>
